<template>
  <div class="add-spu-img-con">
    <div class="tab">
      <div class="tab-item" :class="[currentTab == '1' ? 'active' : '']" @click="handleTabClick('1')">产品图</div>
      <div class="tab-item" :class="[currentTab == '2' ? 'active' : '']" @click="handleTabClick('2')">视频</div>
      <div class="tab-item" :class="[currentTab == '3' ? 'active' : '']" @click="handleTabClick('3')">A+</div>
    </div>
    <a-space class="mt10 mb10">
      <a-button class="gray-outline" @click="del">删除</a-button>
      <a-checkbox v-model="checkedAll" @change="selAll">全选</a-checkbox>
    </a-space>
    <div v-if="currentTab == '1'" class="clearfix">
      <ul class="img-con clearfix fl">
        <div class="draggered-con">
          <li v-for="(item, index) of productPicList" :data-index="index" class="fl">
            <div class="master-map" v-if="index == 0"> 主图 </div>
            <div class="tag-map" v-if="item.tag"> {{ item.tag }} </div>

            <div class="check-box">
              <a-checkbox v-model="item.checked"></a-checkbox>
            </div>

            <div class="mask">
              <div class="btn-con">
                <icon-eye class="cursor" style="margin-right: 15px" @click="showImgPre(index)" />
                <icon-delete class="cursor" @click="productPicList.splice(index, 1)" />
              </div>
            </div>
            <a-image :src="item.url" width="100%" height="160px" />
            <div class="footer-info">
              <span>{{ item.tag }}</span>
              <span v-if="item.width">({{ item.width }}×{{ item.height }})</span>
            </div>
          </li>
        </div>
        <a-image-preview-group v-model:visible="visible" v-model:current="current" infinite :srcList="productPicList.map((e:any) => e.url)" />
        <a-upload class="fl" v-if="productPicList.length < 10" style="width: 160px" list-type="picture-card" action="/" :on-before-upload="beforeUplaod" />
      </ul>

      <div style="font-size: 10px; color: #999999">已上传{{ productPicList.length }}/10张(支持JPG/PNG/BMP/GIF格式,图片大小不能超过5M)</div>
    </div>
    <div v-if="currentTab == '2'" class="clearfix">
      <ul class="img-con clearfix fl">
        <li v-for="(item, index) of productVideoList" class="fl">
          <div class="check-box">
            <a-checkbox v-model="item.checked"></a-checkbox>
          </div>

          <!-- <div class="mask">
            <div class="btn-con">
              <icon-delete class="cursor" @click="productVideoList.splice(index, 1)" />
            </div>
          </div> -->
          <video :src="item.url" style="width: 160px; height: 160px" width="160" height="160" controls></video>
          <!-- <a-image :src="item.url" width="100%" height="100%" /> -->
        </li>
        <a-upload class="fl" v-if="productVideoList.length < 10" style="width: 160px" action="/" :on-before-upload="beforeUplaodVideo">
          <template #upload-button>
            <div class="custom-uplaod-btn">
              <icon-plus />
            </div>
          </template>
        </a-upload>
      </ul>

      <div style="font-size: 10px; color: #999999">已上传{{ productVideoList.length }}/10个(支持mov 和 mp4格式,视频大小不能超过100M)</div>
    </div>
    <div v-if="currentTab == '3'" class="clearfix">
      <ul class="img-con clearfix fl">
        <div class="draggered-con">
          <li v-for="(item, index) of productAddPicList" class="fl">
            <div class="master-map" v-if="index == 0"> 主图 </div>
            <div class="check-box">
              <a-checkbox v-model="item.checked"></a-checkbox>
            </div>

            <div class="mask">
              <div class="btn-con">
                <icon-eye class="cursor" style="margin-right: 15px" @click="showImgPre(index)" />
                <icon-delete class="cursor" @click="productAddPicList.splice(index, 1)" />
              </div>
            </div>
            <a-image :src="item.url" width="100%" height="160px" />
            <div class="footer-info">
              <span>{{ item.tag }}</span>
              <span v-if="item.width">({{ item.width }}×{{ item.height }})</span>
            </div>
          </li>
        </div>

        <a-image-preview-group v-model:visible="visible" v-model:current="current" infinite :srcList="productAddPicList.map((e:any) => e.url)" />
        <a-upload class="fl" v-if="productAddPicList.length < 10" style="width: 160px" list-type="picture-card" action="/" :on-before-upload="beforeUplaod" />
      </ul>

      <div style="font-size: 10px; color: #999999">已上传{{ productAddPicList.length }}/10张(支持JPG/PNG/BMP/GIF格式,图片大小不能超过5M)</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, onMounted, nextTick, watch } from 'vue'
  import { Message, modal } from '@arco-design/web-vue'
  import { uplaodImg, uploadFile } from '@/api/base'
  import { getImageSize } from '@/utils'
  import Sortable from 'sortablejs'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['type', 'info', 'setFirtImg'],
    setup(props: any, { emit }) {
      const data: any = reactive({
        currentTab: '1',
        current: '1',
        checkedAll: false,
        visible: false,
        productPicList: [],
        productVideoList: [],
        productAddPicList: [],
      })

      const beforeUplaod = async (file: any) => {
        let type = file.type.split('/')[1]
        if (!['JPG', 'PNG', 'BMP', 'GIF', 'JPEG'].includes(type.toUpperCase())) {
          Message.error('请上传JPG/PNG/BMP/GIF/JPEG格式的图片')
          return false
        }
        if (file.size / 1024 / 1024 > 5) {
          Message.error('图片最大为5M')
          return false
        }
        let formData = new FormData()
        formData.append('file', file)
        const res: any = await uplaodImg(formData)
        if (res) {
          const imgSize: any = await getImageSize(file)
          let obj = {
            url: res.data.publicUrl,
            width: imgSize.width,
            height: imgSize.height,
          }
          if (data.currentTab == '1') {
            data.productPicList.push(obj)
          } else if (data.currentTab == '3') {
            data.productAddPicList.push(obj)
          }
        }
      }

      const beforeUplaodVideo = async (file: any) => {
        let type = file.type.split('/')[1]
        if (!['MOV', 'MP4'].includes(type.toUpperCase())) {
          Message.error('请上传mp4/mov格式的视频')
          return false
        }
        if (file.size / 1024 / 1024 > 100) {
          Message.error('视频最大为100M')
          return false
        }
        let formData = new FormData()
        formData.append('file', file)
        const res: any = await uploadFile(formData)
        if (res) {
          let obj = {
            url: res.data.publicUrl,
          }
          data.productVideoList.push(obj)
        }
      }

      const showImgPre = (index: number) => {
        data.current = index
        data.visible = true
      }

      const selAll = (val: boolean) => {
        if (data.currentTab == '1') {
          data.productPicList.map((e: any) => {
            e.checked = val
            return e
          })
        } else if (data.currentTab == '2') {
          data.productVideoList.map((e: any) => {
            e.checked = val
            return e
          })
        } else {
          data.productAddPicList.map((e: any) => {
            e.checked = val
            return e
          })
        }
      }

      const del = () => {
        if (data.currentTab == '1') {
          let noDelList = data.productPicList.filter((e: any) => !e.checked)
          data.productPicList = noDelList
        } else if (data.currentTab == '2') {
          let noDelList = data.productVideoList.filter((e: any) => !e.checked)
          data.productVideoList = noDelList
        } else {
          let noDelList = data.productAddPicList.filter((e: any) => !e.checked)
          data.productAddPicList = noDelList
        }
      }

      const handleTabClick = (i: string) => {
        data.currentTab = i
        data.checkedAll = false
        setTimeout(() => {
          if (i != '2') rowDrop()
        }, 0)
      }

      const rowDrop = () => {
        const body: any = document.querySelector('.draggered-con')
        Sortable.create(body, {
          animation: 200, // 定义排序动画的时间
          forceFallback: true,
          onEnd(evt: any) {
            if (data.currentTab == '1') {
              data.productPicList.splice(evt.newIndex, 0, data.productPicList.splice(evt.oldIndex, 1)[0])
              var newArray = data.productPicList.slice(0)
              data.productPicList = []
              nextTick(() => {
                data.productPicList = newArray
              })
            } else {
              data.productAddPicList.splice(evt.newIndex, 0, data.productAddPicList.splice(evt.oldIndex, 1)[0])
              var newArray = data.productAddPicList.slice(0)
              data.productAddPicList = []
              nextTick(() => {
                data.productAddPicList = newArray
              })
            }
          },
        })
      }

      const init = (info: any) => {
        data.currentTab = '1'
        data.productPicList = info?.productPicList || []
        data.productAddPicList = info?.productAddPicList || []
        data.productVideoList = info?.productVideoList || []
      }

      watch(
        () => data.productPicList,
        (val) => {
          props.setFirtImg ? props.setFirtImg(val) : ''
        },
        { deep: true }
      )

      onMounted(() => {
        nextTick(() => {
          rowDrop()
        })
      })

      return {
        ...(toRefs(data) as any),
        beforeUplaod,
        init,
        showImgPre,
        selAll,
        del,
        handleTabClick,
        beforeUplaodVideo,
      }
    },
  })
</script>

<style lang="less" scoped>
  :deep(.arco-upload-picture-card) {
    width: 160px;
    height: 160px;
  }
  :deep(.arco-upload-list-picture) {
    width: 160px;
    height: 160px;
  }

  .custom-uplaod-btn {
    width: 160px;
    height: 160px;
    line-height: 160px;
    text-align: center;
    background: var(--color-fill-2);
    border: 1px dashed var(--color-neutral-3);
    border-radius: var(--border-radius-small);
  }

  .add-spu-img-con {
    margin: 10px;
    .tab {
      display: flex;
      .tab-item {
        height: 30px;
        line-height: 30px;
        text-align: center;
        width: 80px;
        border: 1px solid #d7d7d7;
        cursor: pointer;
      }
      .active {
        border-color: #5181f2;
        color: #5181f2;
      }
    }

    :deep(.arco-upload-list-picture) {
      display: none;
    }

    .img-con {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 160px;
        height: 190px;
        margin-right: 10px;
        margin-bottom: 5px;
        position: relative;

        .check-box {
          position: absolute;
          top: 5px;
          right: 5px;
          z-index: 2;
        }

        .master-map {
          position: absolute;
          left: 0;
          top: 0;
          background-color: #2da641;
          text-align: center;
          height: 20px;
          width: 40px;
          z-index: 5;
          font-size: 12px;
          line-height: 20px;
          color: white;
        }

        .tag-map {
          position: absolute;
          left: 45px;
          top: 0;
          background-color: #d8f0ea;
          text-align: center;
          height: 20px;
          width: 40px;
          z-index: 5;
          font-size: 12px;
          line-height: 20px;
          // color: white;
        }

        &:hover .mask {
          display: block;
        }
        .mask {
          display: none;
          width: 100%;
          height: 160px;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          background: rgba(0, 0, 0, 0.5);

          .btn-con {
            width: 160px;
            color: white;
            font-size: 18px;
            text-align: center;
            margin-top: 76px;
            align-items: center;
          }
        }
        .footer-info {
          height: 25px;
          line-height: 25px;
          text-align: center;
          font-size: 12px;
          background-color: #d7d7d7;
        }
      }
    }
  }
</style>
